<template>
  <div>
    选择房屋
    <el-button type="text"  style="float: right" @click="getRoom">选择房屋</el-button>
    <!--    弹出层开始-->
    <el-dialog title="选择楼栋" :visible.sync="stepTwoPop" width="41%">
        <el-row>
          <el-col :span="24" :xs="24">
            <span style="font-weight: 700; color: #303133;">房屋编号</span>
            <el-input v-model="queryRoomId" placeholder="请输入楼栋名称" size="small" ></el-input>
          </el-col>
        </el-row>

      <el-table :data="roomList" highlight-current-row>
        <el-table-column prop="id" label="房屋编号" width="100px"></el-table-column>
        <el-table-column prop="unitId" label="单元编号" width="150px"></el-table-column>
        <el-table-column label="楼层" width="150px">
          <template slot-scope="scope">
            {{ scope.row.layer}} 楼
          </template>
        </el-table-column>
        <el-table-column label="户型" width="150px">
          <template slot-scope="scope">
            {{ scope.row.section}} 室 {{ scope.row.apartment}}厅
          </template>
        </el-table-column>
        <el-table-column label="有无电梯">
          <template slot-scope="scope">
            {{ scope.row.lift === '1010' ? '有':'无' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="xuanze(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--    弹出层结束-->

    <el-divider></el-divider>

    <!--    楼栋信息开始-->

    <el-row style="padding-left: 50px;padding-right: 50px;padding-bottom: 40px">
      <el-col :span="6">
        <span class="zitiyangshi">房屋ID:</span> <span class="neirong">{{room.id}}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">单元ID:</span> <span class="neirong">{{ room.unitId }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">楼层:</span> <span class="neirong">{{ room.layer }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">建筑面积:</span> <span class="neirong">{{ room.builtUpArea }}</span> ㎡
      </el-col>
      </el-row>
      <el-row style="padding-left: 50px;padding-right: 50px;">
      <el-col :span="6">
        <span class="zitiyangshi">房间数:</span> <span class="neirong">{{ room.section }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">厅数:</span> <span class="neirong">{{ room.apartment }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">单价:</span> <span class="neirong">{{ room.id }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">有无电梯:</span> <span class="neirong">{{ room.lift==='1010' ? '有':'无' }}</span>
      </el-col>
    </el-row>
    <!--    楼栋信息结束-->
  </div>
</template>

<script>
import {getFloorRoom} from '@/api/village/floor'

export default {
  name: "stepTwo",
  props:['getRoomIdAndUnitId','floorId'],
  data(){
    return{
      // total总数
      total: 0,
      // 楼栋弹窗
      stepTwoPop: false,
      queryRoomId:undefined,
      roomList:[],
      room:{
        id:undefined,
        unitId:undefined,
        layer:undefined,
        section:undefined,
        apartment: undefined,
        builtUpArea:undefined,
        lift:undefined
      }
    }
  },
  methods:{
    getRoom(){
      this.stepTwoPop = true
      let roomId = this.queryRoomId===undefined ? 0:this.queryRoomId
      getFloorRoom(this.floorId,roomId).then(res => {
        this.roomList = res.data
      })
    },

    xuanze(room){
      this.room = room
      this.stepTwoPop = false
      this.getRoomIdAndUnitId(room.unitId,room.id)
    },

    handleSizeChange(val){
      this.query.pageSize = val
      this.getFloor()
    },
    handleCurrentChange(val){
      this.query.pageNum = val
      this.getFloor()
    }
  },
  watch:{
    'queryRoomId':{
      handler(newVal,oldVal){
        if(this.queryRoomId !== undefined || this.queryRoomId !== 0){
          this.getRoom()
        }
      },
      deep:true
    }

  }

}
</script>

<style scoped>
.zitiyangshi{
  color : #686B6D; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:20px;
  height:36px;
}
.neirong{
  margin: 0 5px;
  color : #999999; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:15px;
  height:36px;
}
</style>
